<script>
const systemName = process.env.VUE_APP_TITLE

export default {
  functional: true,
  props: {
    to: String
  },
  render(h, { data, props }) {
    return (
      <div class="pro-global-header-logo" { ...data }>
        <router-link class="pro-global-header-logo-link" to={ props.to || {} }>
          { /* <img src={ require('@/assets/img/logo.png') } alt="logo" /> */ }
          <h1 style="margin-left: 0">{ systemName }</h1>
        </router-link>
      </div>
    )
  }
}
</script>

<style lang="less">
.pro-global-header-logo {
  display: flex;
  align-items: center;
  height: @layout-header-height;

  @line-height: @layout-header-height - @padding-xs * 2;

  &-link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: @padding-xs 0;
  }

  img {
    display: inline-block;
    height: @line-height - 4;
    vertical-align: middle;
  }

  h1 {
    display: inline-block;
    margin: 0 0 0 @padding-sm;
    color: @menu-dark-highlight-color;
    font-weight: 600;
    font-size: 18px;
    line-height: @line-height;
    .text-elip();
  }
}
</style>
